<template>
  <div :id="chartId" :style="{width,height}" />
</template>
<script>
import * as echarts from 'echarts'
let myChart = null
export default {
  name: 'ExampleChart',
  props: {
    chartId: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  methods: {
    initChart(param) {
      if (myChart !== null && myChart !== undefined && myChart !== '') {
        myChart.dispose()
        myChart = null
      }
      myChart = echarts.init(document.getElementById(this.chartId))
      myChart.setOption(this.initOptions(param))
    },
    initOptions(param) {
      const options = {
        title: {
          text: 'ECharts测试'
        },
        tooltip: {},
        xAxis: {
          data: param.xData
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: param.yData
          }
        ]
      }
      return options
    }
  }
}
</script>
